<template>
  <div class="footer_nav_wrap">
    <ul class="footer_nav_ul clearfix">
      <li class="current home">
        <a  @click="goTO('home')">
          <i class="iconfont">&#xe629;</i>
          <br />
          <span>首页</span>
        </a>
      </li>
      <li class="library message">
        <a  @click="goTO('message')">
          <span class="icon iconfont">&#xe608;</span>
          <br />
          <span>消息</span>
        </a>
      </li>
      <li class="mine my">
        <a  @click="goTO('my')">
          <i class="iconfont">&#xe604;</i>
          <br />
          <span>我的</span>
        </a>
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  props: {
    tabbarName: String
  },
  mounted(){
    this.changeClass(this.tabbarName);
  },
  methods:{
    goTO(className){
      this.$router.push('/'+className)
      this.changeClass(className)
    },
    changeClass(className){
      $(".footer_nav_ul.clearfix li").removeClass("current");
      $("."+className).addClass("current");
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/zyy_phone.css"; 
</style>
